const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
// 这个文件时webpack的配置文件，需要暴露一个配置对象出去（commonjs规范来暴露）
// 处理绝对路劲的方法 __dirname是当前文件所处的绝对路径
const pathResolve = (pathStr) => path.resolve(__dirname, pathStr)
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const latestCssLoader = MiniCssExtractPlugin.loader // style-loader
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
    //   入口
    entry: {
        main: './src/main.js',
        // index: './src/index.js'
    },
    // 出口
    // 出口 其实现在来说默认的出口就是dist
    output: {
        path: pathResolve('./build'), //默认是dist,要求是绝对路劲，./build话会出错，因为要的是绝对路径
        filename: 'main-[hash:8].js',//可以更改入口文件的名字,加入hash值，可以保证每次代码更改后打包出不一样的文件名字，以防止部署之后浏览器的缓存问题影响。
        clean: true //清除上一次打包的文件 
    },
    // 插件 是wenpack中实现特殊能力
    // 往往表现为一个类，通过每一次的实例化来实现它的功能
    // 将公共静态目录文件复制到打包目录中
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name]-[hash:16].css'
        })
    ],
    module: {
        rules: [
            // 处理css
            {
                test: /\.css$/, use: [latestCssLoader, 'css-loader'],
            },
            // 处理scss
            {
                test: /\.(scss|sass)$/, use: [latestCssLoader, 'css-loader', 'sass-loader'],
            },
            // 处理vue文件
            {
                test: /\.vue$/, use: ['vue-loader',],
            },
            // 处理js文件
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }

                }
            },

            // 处理图片
            // file-loader 负责将图片文件移动到打包目录中,这样在项目中import导入的图片文件其实拿到的内容就是图片打包之后的地址
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                use: [
                    // 注释原因是说有更好的替代平，你不行呀小老弟
                    // 补充一下兄弟们是因为file-loader他是因为不关心文件的大小，大小文件都是单独打包的，意味着上线之后，每一个文件你那件都需要单独的发送http请求
                    // 所以我们用url-loader来代替file-loader
                    // 他会将图片转换为base64字符串，并且打包之后会到打包之后的main.js的文件中，这样就减少了http请求
                    // 但是这样会出现一个问题就是main.js中这个文件太大了不是太好，所以我们的思想就是大文件单独打包小文件转换为base64 的格式，
                    // 约定就是小于8kb得文件会转为banse64,否则就让他单的打包
                    // {
                    //     loader: 'file-loader',
                    //     options: {
                    //         name: '[name]-[hash:8].[ext]',
                    //     }
                    // },
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]',
                            limit: 8 * 1024, // 8kb
                        }
                    }
                ]
            },
        ]
    }


}